<template>
  <el-tabs v-model="activeName" stretch="true" @tab-click="tabClick">
    <el-tab-pane v-for="(item,index) in titles" :key="index" :label="item.title" :name="item.tname" class="tabpane">
    </el-tab-pane>
    
  </el-tabs>
 
</template>

<script>
import { onMounted, reactive, toRefs } from 'vue'

export default {
     props: {
        titles: {
            type: Array,
            default(){
                return[]
            }
        }
    },
    setup (props, { emit}) {
        const state = reactive({
            activeName: ''
        })
        onMounted(() => {           // 起始让标签在第一个选项卡上
            state.activeName = props.titles[0].tname
        })
        const tabClick = (tab) => {
            emit('tabclick',tab.index)
        }
        return {
            ...toRefs(state),
            tabClick
        }
    }
}
</script>

<style lang="scss" scoped>
el-tabs{
    width: 100%;
}
</style>